/* 第三方图标字体间距/大小设置
------------------------------- */
@mixin generalIcon {
	font-size: 14px !important;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	width: 24px;
	text-align: center;
}


/* 文本不换行
------------------------------- */
@mixin text-no-wrap() {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* 多行文本溢出
  ------------------------------- */
@mixin text-ellipsis($line: 2) {
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: $line;
	-webkit-box-orient: vertical;
}

/* 滚动条(页面未使用) div 中使用：
  ------------------------------- */
// .test {
//   @include scrollBar;
// }
@mixin scrollBar {
	// 滚动条凹槽的颜色，还可以设置边框属性
	&::-webkit-scrollbar-track-piece {
		background-color: #f8f8f8;
	}
	// 滚动条的宽度
	&::-webkit-scrollbar {
		width: 9px;
		height: 9px;
	}
	// 滚动条的设置
	&::-webkit-scrollbar-thumb {
		background-color: #dddddd;
		background-clip: padding-box;
		min-height: 28px;
	}
	&::-webkit-scrollbar-thumb:hover {
		background-color: #bbb;
	}
}
/*文本格式化，超出范围，显示省略号*/
@mixin textOverflow($width:100%,$display:block) {
	width: $width;
	display: $display;
	white-space: nowrap;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
  }
  /* 清除浮动 */
  @mixin clearfix {
	&:after {
	  clear: both;
	  content: '.';
	  display: block;
	  height: 0;
	  line-height: 0;
	  overflow: hidden;
	}
	*height: 1%;
  }
   
  /*弹性盒子（传入null不设置该属性）*/
  @mixin flexBox($direction: row, $justify: null, $align: null, $flex-wrap: null) {
	  display: flex;
	  @if ($direction!=null) {
		  flex-direction: $direction;
	  }
	  @if ($justify!=null) {
		  justify-content: $justify;
	  }
	  @if ($align!=null) {
		  align-items: $align;
	  }
	  @if ($flex-wrap != null) {
		  flex-wrap: $flex-wrap;
	  }
  }
   
  /*绝对定位  参数顺序：上右下左*/
  @mixin positionAbsolute($top:null,$right:null,$bottom:null,$left:null) {
	position: absolute;
	@if ($left!="" & & $left!=null) {
	  left: $left;
	}
	@if ($right!="" & & $right!=null) {
	  right: $right;
	}
	@if ($top!="" & & $top!=null) {
	  top: $top;
	}
	@if ($bottom!="" & & $bottom!=null) {
	  bottom: $bottom;
	}
  }
   
  /*左浮动*/
  @mixin float-left($width:19%,$margin-right:1.2%) {
	width: $width;
	float: left;
	@if ($margin-right!=null) {
	  margin-right: $margin-right;
	}
  }
   
  /*右浮动*/
  @mixin float-Right($width:19%,$margin-left:1.2%) {
	width: $width;
	float: right;
	@if ($margin-left!=null) {
	  margin-left: $margin-left;
	}
  }
   
  /*渐变(从上到下）*/
  @mixin linear-gradient($direction:bottom,$color1:transparent,$color2:#306eff,$color3:transparent) {
	//background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
	background: -o-linear-gradient($direction, $color1, $color2, $color3); /* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient($direction, $color1, $color2, $color3); /* Firefox 3.6 - 15 */
	background: linear-gradient(to $direction, $color1, $color2, $color3); /* 标准的语法 */
  }
   
  /* 行高 */
  @mixin line-height($height:30px,$line-height:30px) {
	@if ($height != null) {
	  height: $height;
	}
	@if ($line-height!=null) {
	  line-height: $line-height;
	}
  }
   
  /* 画三角形 */
  @mixin triangle($width:10px,$direction:top,$color:$bgBlueLight) {
	border: $width solid transparent;
	@if ($direction == top) { // 上三角
	  border-bottom-color: $color;
	}
	@if ($direction == bottom) { // 下三角
	  border-top-color: $color;
	}
	@if ($direction == left) { // 左三角
	  border-right-color: $color;
	}
	@if ($direction == right) { // 右三角
	  border-left-color: $color;
	}
  }
   
  /* 文本阴影 */
  @mixin text-show($h-shadow:0px, $v-shadow:0px, $blur:10px, $color:rgba(0,180,255,0.7)) {
	text-shadow: $h-shadow $v-shadow $blur $color;
  }
   
  /* 链接样式 */
  @mixin hoverStyle($style:(color:#d9fdff),$hoverStyle:(color:#306eff)) {
	text-decoration: none;
	@each $key, $value in $style {
	  #{$key}: #{$value};
	}
	@if ($hoverStyle!=null & & $hoverStyle!="") {
	  &:hover {
		@each $key, $value in $hoverStyle {
		  #{$key}: #{$value};
		}
	  }
	}
  }
  
   
  /* 定义滚动条样式 圆角和阴影不需要则传入null */
  @mixin scrollBar($width:10px,$height:10px,$outColor:$bgColor,$innerColor:$bgGrey,$radius:5px,$shadow:null) {
	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	&::-webkit-scrollbar {
	  width: $width;
	  height: $height;
	  background-color: $outColor;
	}
   
	/*定义滚动条轨道 内阴影+圆角*/
	&::-webkit-scrollbar-track {
	  @if ($shadow!=null) {
		-webkit-box-shadow: $shadow;
	  }
	  @if ($radius!=null) {
		border-radius: $radius;
	  }
	  background-color: $outColor;
	}
   
	/*定义滑块 内阴影+圆角*/
	&::-webkit-scrollbar-thumb {
	  @if ($shadow!=null) {
		-webkit-box-shadow: $shadow;
	  }
	  @if ($radius!=null) {
		border-radius: $radius;
	  }
	  background-color: $innerColor;
	  border: 1px solid $innerColor;
	}
  }
   
  /* css3动画 默认3s宽度到200px */
  @mixin animation($from:(width:0px),$to:(width:200px),$name:mymove,$animate:mymove 2s 1 linear infinite) {
	-webkit-animation: $animate;
	-o-animation: $animate;
	animation: $animate;
	@keyframes #{$name}
	{
	  from {
		@each $key, $value in $from {
		  #{$key}: #{$value};
		}
	  }
	  to {
		@each $key, $value in $to {
		  #{$key}: #{$value};
		}
	  }
	}
   
	@-webkit-keyframes #{$name}
	{
	  from {
		@each $key, $value in $from {
		  $key: $value;
		}
	  }
	  to {
		@each $key, $value in $to {
		  $key: $value;
		}
	  }
	}
  }
  
   
  /* 圆形盒子 */
  @mixin circle($size: 11px,$bg: #fff) {
	border-radius: 50%;
	width: $size;
	height: $size;
	line-height: $size;
	text-align: center;
	background: $bg;
  }
   
  /* placeholder */
  @mixin placeholder($color: #bbb) {
	  // Firefox
	  &::-moz-placeholder {
		color: $color;
		opacity: 1; 
	  }
	  // Internet Explorer 10+
	  &:-ms-input-placeholder {
		color: $color;
	  }
	  // Safari and Chrome
	  &::-webkit-input-placeholder {
		color: $color;
	  }
	
	  &:placeholder-shown {
		text-overflow: ellipsis;
	  }
	}